<template>
  <div class="subject">
    <span>{{num1}}</span>
    <span>+</span>
    <span>{{num2}}</span>
    <span>=</span>
    <input type="number" v-model="num"/>
    <button @click="btnSubmit">提交</button>
  </div>
</template>

<script>
export default {  
  name: 'Subject',
  data(){
    return{
      num: null,
      num1: Math.ceil(Math.random() * 10),
      num2: Math.ceil(Math.random() * 10)
    }
  },
  methods: {
    btnSubmit(){
      this.$emit('checkSum')
    },
    isNull(){
      if(this.num === null){
        return null
      } else if ((!this.num.length && this.num.length === 0)){
        return null
      } else {
        return this.num
      }
    }
  },
  computed: {
    isFlag(){
      return this.num1 + this.num2 == this.num
    }
  }
};
</script>

<style scoped>
.subject {
  margin: 5px;
  padding: 5px;
  font-size: 20px;
}
.subject span {
  display: inline-block;
  text-align: center;
  width: 20px;
}
.subject input {
  width: 50px;
  height: 20px;
}
</style>